<template>
	<view>
		<view class="calendar-container">
			<uni-calendar :insert="true" :lunar="false" :selected="list" @monthSwitch="changeMonth"
				@confirm="changeMonth" @change="selectDay"></uni-calendar>
		</view>
		<view>
			<button type="default" @click="openChackin">查看详细</button>
		</view>


		<uni-popup ref="alertDialog" type="dialog" is-mask-click="ture">
			<uni-popup-dialog type="info" mode="base" cancelText="关闭" :title="selectedDay + '打卡详细'"
				:content="'状态：' + dayInif.statusName" @confirm="dialogConfirm" @close="dialogClose">
				<view>
					<text style="display: block;">状态: {{dayInif.statusName}}</text>
					<text style="display: block; margin-top:5px">上班打卡时间：{{dayInif.workTime == undefined ? "无":dayInif.workTime}}</text>
					<text style="display: block; margin-top:5px">地点：{{dayInif.workAddr == undefined ? "无":dayInif.workAddr}}</text>
					<text style="display: block; margin-top:5px">下班打卡时间：{{dayInif.offTime == undefined ? "无":dayInif.offTime}}</text>
					<text style="display: block; margin-top:5px">地点：{{dayInif.offAddr == undefined ? "无":dayInif.offAddr}}</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>

	</view>



</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';

	export default {
		components: {
			uniCalendar,
		},
		data() {
			return {
				list: [],
				sum_1: 0,
				sum_2: 0,
				sum_3: 0,
				sum: 0,
				selectedDay: "",
				dayInif: {},
			}
		},
		onShow: function() {
			let that = this
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			that.selectedDay = year + "-" + month + "-" + day
			that.searchCheckin(that, year, month)
		},
		methods: {
			searchCheckin: function(ref, year, month) {
				let that = ref
				that.sum_1 = 0
				that.sum_2 = 0
				that.sum_3 = 0
				that.sum = 0
				that.list.length = 0

				// 查询本月考勤情况的方法
				that.ajax(that.url.searchMonthCheckin, "GET", {
					year: year,
					month: month
				}, function(resp) {
					console.log(resp)
					let result = resp.data.data
					for (let one of result.list) {
						if (one.status != null && one.status != "") {
							let color = ""
							if (one.status == "正常") {
								color = "green"
							} else if (one.status == "未下班") {
								color = "grey"
							} else if (one.status == "缺勤") {
								color = "red"
							}
							that.list.push({
								date: one.date,
								info: one.status,
								color: color
							})
						}
					}
				})
			},
			changeMonth: function(e) {
				let that = this
				let year = e.year
				let month = e.month
				let day = e.day
				that.searchCheckin(that, year, month)
			},
			selectDay: function(e) {
				let that = this
				let year = e.year
				let month = e.month
				let day = e.day;
				that.selectedDay = e.fulldate;
			},
			openChackin: function(e) {
				let that = this
				let date = that.selectedDay
				console.log(date)
				that.ajax(that.url.searchOneCheckin, "GET", {
					date: date
				}, function(resp) {
					if (resp.data.code == 200) {
						console.log(resp.data)
						that.dayInif = resp.data.data
						that.$refs.alertDialog.open()
					}

				})
			}
		}
	}
</script>

<style lang="less">
	@import url('my_checkin.less');
</style>